<template>
  <view class="container">
    <!-- 标题区域 -->
    <view class="game-title">幸运大抽奖</view>

    <!-- 抽奖转盘区域 -->
    <view class="lottery-container">
      <view class="lottery-wheel" :style="{ transform: `rotate(${rotateDegree}deg)` }">
        <view class="prize-item" v-for="(prize, index) in prizes" :key="index" :style="{ 
            transform: `rotate(${360 / prizes.length * index}deg) translate(0, -160rpx)`,
            opacity: isRolling ? 0.7 : 1
          }">
          <view class="prize-content" :style="{ transform: `rotate(-${360 / prizes.length * index}deg)` }">
            {{ prize.name }}
          </view>
        </view>
        <view class="wheel-center"></view>
      </view>

      <!-- 指针 -->
      <view class="pointer"></view>
    </view>

    <!-- 控制按钮区域 -->
    <view class="control-area">
      <button class="main-btn" :class="{ rolling: isRolling }" :disabled="isRolling && !canStop" @click="toggleLottery">
        {{ isRolling ? '停止抽奖' : '开始抽奖' }}
      </button>

      <button class="reset-btn" :disabled="isRolling" @click="resetGame">
        重新开始
      </button>
    </view>

    <!-- 抽奖结果弹窗 -->
    <view class="result-modal" v-if="showResult">
      <view class="modal-content">
        <view class="modal-title">恭喜您！</view>
        <view class="prize-result">
          您抽中了：<text class="prize-name">{{ currentPrize.name }}</text>
        </view>
        <view class="prize-desc">{{ currentPrize.desc }}</view>
        <button class="confirm-btn" @click="showResult = false">确定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
  import {
    ref,
    onMounted,
    computed
  } from 'vue';

  // 奖品列表
  const prizes = ref([{
      name: "10元红包",
      desc: "可在商城消费时抵扣"
    },
    {
      name: "谢谢参与",
      desc: "再接再厉，下次好运"
    },
    {
      name: "50元红包",
      desc: "满100元可用"
    },
    {
      name: "电影票",
      desc: "全国影院通用"
    },
    {
      name: "20元红包",
      desc: "无使用门槛"
    },
    {
      name: "手机一部",
      desc: "最新款智能手机"
    },
    {
      name: "优惠券",
      desc: "指定商品可用"
    },
    {
      name: "笔记本电脑",
      desc: "高性能笔记本"
    }
  ]);

  // 抽奖状态
  const isRolling = ref(false);
  const canStop = ref(false);
  const rotateDegree = ref(0);
  const showResult = ref(false);
  const currentPrize = ref(null);
  let rollTimer = null;
  let speed = 10; // 初始速度
  let slowDownCounter = 0;

  // 计算当前指向的奖品索引
  const currentIndex = computed(() => {
    // 计算旋转后的角度（取模360）
    const normalizedDegree = (rotateDegree.value % 360 + 360) % 360;
    // 计算每个奖品占据的角度
    const anglePerItem = 360 / prizes.value.length;
    // 计算当前指向的奖品索引（考虑指针在顶部，需要调整角度计算）
    let index = Math.floor((360 - normalizedDegree) / anglePerItem) % prizes.value.length;
    return index;
  });

  // 开始/停止抽奖
  const toggleLottery = () => {
    if (!isRolling.value) {
      // 开始抽奖
      startRolling();
    } else {
      // 停止抽奖
      stopRolling();
    }
  };

  // 开始滚动抽奖
  const startRolling = () => {
    isRolling.value = true;
    canStop = true;
    showResult.value = false;
    speed = 10;
    slowDownCounter = 0;

    // 清除之前的定时器
    if (rollTimer) clearInterval(rollTimer);

    // 启动滚动动画
    rollTimer = setInterval(() => {
      rotateDegree.value += speed;

      // 限制最大角度，防止数值过大
      if (rotateDegree.value > 10000) {
        rotateDegree.value %= 360;
      }
    }, 30);
  };

  // 停止滚动抽奖
  const stopRolling = () => {
    canStop = false;

    // 逐渐减速
    const slowDownTimer = setInterval(() => {
      slowDownCounter++;
      speed *= 0.95;

      // 当速度足够慢时，停止滚动
      if (speed < 0.5) {
        clearInterval(rollTimer);
        clearInterval(slowDownTimer);
        isRolling.value = false;

        // 确保最终停在一个奖品的正中间
        const anglePerItem = 360 / prizes.value.length;
        const targetDegree = Math.ceil(rotateDegree.value / anglePerItem) * anglePerItem;
        rotateDegree.value = targetDegree;

        // 显示抽奖结果
        currentPrize.value = prizes.value[currentIndex.value];
        showResult.value = true;
      }
    }, 100);
  };

  // 重置游戏
  const resetGame = () => {
    if (rollTimer) clearInterval(rollTimer);
    isRolling.value = false;
    canStop = false;
    showResult.value = false;
    rotateDegree.value = 0;
    currentPrize.value = null;
  };

  onMounted(() => {
    // 初始化时随机旋转一个小角度
    rotateDegree.value = Math.random() * 30;
  });
</script>

<style scoped>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f8f9fa;
    min-height: 100vh;
    padding-top: 60rpx;
  }

  .game-title {
    font-size: 48rpx;
    font-weight: bold;
    color: #e63946;
    margin-bottom: 60rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  }

  .lottery-container {
    position: relative;
    width: 600rpx;
    height: 600rpx;
    margin-bottom: 80rpx;
  }

  .lottery-wheel {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transition: transform 0.1s linear;
    background-color: #fff;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.15);
    overflow: hidden;
  }

  .prize-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    height: 50%;
    transform-origin: bottom left;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .prize-content {
    width: 160rpx;
    text-align: center;
    font-size: 24rpx;
    font-weight: bold;
    color: #333;
    transform-origin: center;
    padding: 10rpx;
  }

  /* 为不同的奖品项设置交替颜色 */
  .prize-item:nth-child(odd) .prize-content {
    background-color: #fff1f0;
  }

  .prize-item:nth-child(even) .prize-content {
    background-color: #f0f9ff;
  }

  .wheel-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background-color: #e63946;
    transform: translate(-50%, -50%);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.2);
    z-index: 10;
  }

  .pointer {
    position: absolute;
    top: -30rpx;
    left: 50%;
    width: 60rpx;
    height: 80rpx;
    background-color: #e63946;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    transform: translateX(-50%);
    z-index: 20;
    box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.2);
  }

  .control-area {
    display: flex;
    gap: 40rpx;
    margin-bottom: 60rpx;
  }

  .main-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #e63946;
    color: #fff;
    border-radius: 40rpx;
    font-size: 30rpx;
    font-weight: bold;
    border: none;
    box-shadow: 0 5rpx 15rpx rgba(230, 57, 70, 0.3);
  }

  .main-btn.rolling {
    background-color: #ff758f;
  }

  .main-btn:disabled {
    background-color: #f4a261;
    opacity: 0.7;
  }

  .reset-btn {
    width: 240rpx;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
    color: #333;
    border-radius: 40rpx;
    font-size: 30rpx;
    border: 2rpx solid #ddd;
  }

  .reset-btn:disabled {
    color: #ccc;
    border-color: #eee;
  }

  .result-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  .modal-content {
    width: 500rpx;
    background-color: #fff;
    border-radius: 30rpx;
    padding: 50rpx 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .modal-title {
    font-size: 40rpx;
    font-weight: bold;
    color: #e63946;
    margin-bottom: 30rpx;
  }

  .prize-result {
    font-size: 32rpx;
    margin-bottom: 20rpx;
    text-align: center;
  }

  .prize-name {
    color: #e63946;
    font-weight: bold;
    font-size: 36rpx;
  }

  .prize-desc {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 40rpx;
    text-align: center;
    padding: 0 20rpx;
  }

  .confirm-btn {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    background-color: #e63946;
    color: #fff;
    border-radius: 35rpx;
    font-size: 28rpx;
    border: none;
  }
</style>